<!DOCTYPE HTML>
<!--
	二手电子乐园 - 用户登录注册页
	基于 Helios by HTML5 UP 模板改造
-->
<html>
<head>
	<title>用户登录/注册 - 二手电子乐园</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
	<meta name="description" content="二手电子乐园用户登录和注册页面" />
	<link rel="stylesheet" href="assets/css/main.css" />
	<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
	<style>
		[v-cloak] { display: none; }
		.auth-container {
			max-width: 500px;
			margin: 0 auto;
			padding: 2em;
		}
		.auth-tabs {
			display: flex;
			margin-bottom: 2em;
			border-bottom: 2px solid #eee;
		}
		.auth-tab {
			flex: 1;
			padding: 1em;
			text-align: center;
			cursor: pointer;
			background: none;
			border: none;
			font-size: 1.1em;
			color: #666;
			transition: all 0.3s ease;
		}
		.auth-tab.active {
			color: #4acaa8;
			border-bottom: 2px solid #4acaa8;
		}
		.auth-form {
			background: #f8f9fa;
			padding: 2em;
			border-radius: 8px;
		}
		.form-group {
			margin-bottom: 1.5em;
		}
		.form-group label {
			display: block;
			margin-bottom: 0.5em;
			font-weight: bold;
			color: #333;
		}
		.form-group input {
			width: 100%;
			padding: 0.8em;
			border: 1px solid #ddd;
			border-radius: 4px;
			font-size: 1em;
		}
		.form-group input:focus {
			outline: none;
			border-color: #4acaa8;
		}
		.verify-code-group {
			display: flex;
			gap: 10px;
		}
		.verify-code-group input {
			flex: 1;
		}
		.verify-btn {
			background: #4acaa8;
			color: white;
			border: none;
			padding: 0.8em 1em;
			border-radius: 4px;
			cursor: pointer;
			white-space: nowrap;
		}
		.verify-btn:hover {
			background: #3a9d84;
		}
		.verify-btn:disabled {
			background: #ccc;
			cursor: not-allowed;
		}
		.submit-btn {
			width: 100%;
			background: #4acaa8;
			color: white;
			border: none;
			padding: 1em;
			border-radius: 4px;
			font-size: 1.1em;
			cursor: pointer;
			margin-top: 1em;
		}
		.submit-btn:hover {
			background: #3a9d84;
		}
		.error-message {
			color: #e74c3c;
			margin-top: 0.5em;
			font-size: 0.9em;
		}
		.success-message {
			color: #27ae60;
			margin-top: 0.5em;
			font-size: 0.9em;
		}
		.test-account {
			background: #fff3cd;
			border: 1px solid #ffeaa7;
			padding: 1em;
			border-radius: 4px;
			margin-top: 1em;
		}
		.test-account h4 {
			margin: 0 0 0.5em 0;
			color: #856404;
		}
		.test-account p {
			margin: 0;
			color: #856404;
			font-size: 0.9em;
		}
	</style>
</head>
<body class="is-preload" v-scope v-cloak>
	<div id="page-wrapper">
		<!-- Header Container -->
		<div id="header-container"></div>

		<!-- Main -->
		<div class="wrapper style1">
			<div class="container">
				<article id="main" class="special">
					<header>
						<h2>用户中心</h2>
						<p>登录或注册账户，享受更多服务</p>
					</header>

					<div class="auth-container">
						<!-- 标签切换 -->
						<div class="auth-tabs">
							<button 
								class="auth-tab" 
								:class="{ active: activeTab === 'login' }"
								@click="activeTab = 'login'"
							>
								登录
							</button>
							<button 
								class="auth-tab" 
								:class="{ active: activeTab === 'register' }"
								@click="activeTab = 'register'"
							>
								注册
							</button>
						</div>

						<!-- 登录表单 -->
						<div v-show="activeTab === 'login'" class="auth-form">
							<form @submit.prevent="handleLogin">
								<div class="form-group">
									<label for="loginUsername">用户名/手机号</label>
									<input 
										type="text" 
										id="loginUsername" 
										v-model="loginForm.username" 
										required 
										placeholder="请输入用户名或手机号"
									/>
								</div>
								<div class="form-group">
									<label for="loginPassword">密码</label>
									<input 
										type="password" 
										id="loginPassword" 
										v-model="loginForm.password" 
										required 
										placeholder="请输入密码"
									/>
								</div>
								<div v-if="loginError" class="error-message">{{ loginError }}</div>
								<button type="submit" class="submit-btn">登录</button>
							</form>

							<!-- 测试账户提示 -->
							<div class="test-account">
								<h4>测试账户</h4>
								<p>用户名：zhangsan</p>
								<p>密码：66666666</p>
							</div>
						</div>

						<!-- 注册表单 -->
						<div v-show="activeTab === 'register'" class="auth-form">
							<form @submit.prevent="handleRegister">
								<div class="form-group">
									<label for="regUsername">用户名</label>
									<input 
										type="text" 
										id="regUsername" 
										v-model="registerForm.username" 
										required 
										placeholder="请输入用户名"
									/>
								</div>
								<div class="form-group">
									<label for="regPhone">手机号</label>
									<input 
										type="tel" 
										id="regPhone" 
										v-model="registerForm.phone" 
										required 
										placeholder="请输入手机号"
									/>
								</div>
								<div class="form-group">
									<label for="regEmail">邮箱</label>
									<input 
										type="email" 
										id="regEmail" 
										v-model="registerForm.email" 
										required 
										placeholder="请输入邮箱地址"
									/>
								</div>
								<div class="form-group">
									<label for="regVerifyCode">验证码</label>
									<div class="verify-code-group">
										<input 
											type="text" 
											id="regVerifyCode" 
											v-model="registerForm.verifyCode" 
											required 
											placeholder="请输入验证码"
										/>
										<button 
											type="button" 
											class="verify-btn"
											:disabled="verifyCountdown > 0"
											@click="sendVerifyCode"
										>
											{{ verifyCountdown > 0 ? `${verifyCountdown}s后重发` : '发送验证码' }}
										</button>
									</div>
								</div>
								<div class="form-group">
									<label for="regPassword">密码</label>
									<input 
										type="password" 
										id="regPassword" 
										v-model="registerForm.password" 
										required 
										placeholder="请输入密码（至少6位）"
									/>
								</div>
								<div class="form-group">
									<label for="regConfirmPassword">确认密码</label>
									<input 
										type="password" 
										id="regConfirmPassword" 
										v-model="registerForm.confirmPassword" 
										required 
										placeholder="请再次输入密码"
									/>
								</div>
								<div v-if="registerError" class="error-message">{{ registerError }}</div>
								<div v-if="registerSuccess" class="success-message">{{ registerSuccess }}</div>
								<button type="submit" class="submit-btn">注册</button>
							</form>
						</div>
					</div>
				</article>
			</div>
		</div>

		<!-- Footer Container -->
		<div id="footer-container"></div>
	</div>

	<!-- Scripts -->
	<script src="utils/loader.js"></script>
	<script>
		// 等待所有脚本加载完成后初始化页面
		window.addEventListener('scriptsLoaded', function() {
			// 加载公共组件
			fetchHtml.fetchAll();
			
			// 初始化 petite-vue
			const { createApp } = PetiteVue;
			
			createApp({
				// 数据
				activeTab: 'login',
				loginForm: {
					username: '',
					password: ''
				},
				registerForm: {
					username: '',
					phone: '',
					email: '',
					verifyCode: '',
					password: '',
					confirmPassword: ''
				},
				loginError: '',
				registerError: '',
				registerSuccess: '',
				verifyCountdown: 0,
				
				// 方法
				handleLogin() {
					this.loginError = '';
					
					// 验证输入
					if (!this.loginForm.username || !this.loginForm.password) {
						this.loginError = '请填写完整的登录信息';
						return;
					}
					
					// 测试账户验证
					if (this.loginForm.username === 'zhangsan' && this.loginForm.password === '66666666') {
						localStorage.setItem('isLogin', 'true');
						localStorage.setItem('username', 'zhangsan');
						alert('登录成功！');
						
						// 检查是否有返回页面
						const returnUrl = new URLSearchParams(window.location.search).get('return');
						window.location.href = returnUrl || 'index.html';
					} else {
						this.loginError = '用户名或密码错误';
					}
				},
				
				handleRegister() {
					this.registerError = '';
					this.registerSuccess = '';
					
					// 验证输入
					if (!this.registerForm.username || !this.registerForm.phone || 
						!this.registerForm.email || !this.registerForm.verifyCode ||
						!this.registerForm.password || !this.registerForm.confirmPassword) {
						this.registerError = '请填写完整的注册信息';
						return;
					}
					
					// 验证密码
					if (this.registerForm.password.length < 6) {
						this.registerError = '密码长度至少6位';
						return;
					}
					
					if (this.registerForm.password !== this.registerForm.confirmPassword) {
						this.registerError = '两次输入的密码不一致';
						return;
					}
					
					// 验证手机号格式
					const phoneRegex = /^1[3-9]\d{9}$/;
					if (!phoneRegex.test(this.registerForm.phone)) {
						this.registerError = '请输入正确的手机号格式';
						return;
					}
					
					// 验证邮箱格式
					const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
					if (!emailRegex.test(this.registerForm.email)) {
						this.registerError = '请输入正确的邮箱格式';
						return;
					}
					
					// 模拟注册成功
					this.registerSuccess = '注册成功！请等待管理员审核，审核通过后即可登录使用。';
					
					// 清空表单
					this.registerForm = {
						username: '',
						phone: '',
						email: '',
						verifyCode: '',
						password: '',
						confirmPassword: ''
					};
				},
				
				sendVerifyCode() {
					if (!this.registerForm.phone) {
						this.registerError = '请先输入手机号';
						return;
					}
					
					// 验证手机号格式
					const phoneRegex = /^1[3-9]\d{9}$/;
					if (!phoneRegex.test(this.registerForm.phone)) {
						this.registerError = '请输入正确的手机号格式';
						return;
					}
					
					// 开始倒计时
					this.verifyCountdown = 60;
					const timer = setInterval(() => {
						this.verifyCountdown--;
						if (this.verifyCountdown <= 0) {
							clearInterval(timer);
						}
					}, 1000);
					
					// 模拟发送验证码
					alert('验证码已发送到您的手机，请注意查收');
				}
			}).mount();
		});
	</script>
</body>
</html>
